<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多功能文本编辑器 - 任务3完成版</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f5f5f5;
            height: 100vh;
            overflow: hidden;
        }
        
        .editor-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            background: white;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        
        .editor-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .editor-title {
            font-size: 1.5em;
            font-weight: 600;
        }
        
        .editor-status {
            display: flex;
            gap: 20px;
            font-size: 0.9em;
            opacity: 0.9;
        }
        
        .status-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #4CAF50;
        }
        
        .status-indicator.saving {
            background: #FF9800;
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .toolbar {
            background: #fafafa;
            border-bottom: 1px solid #e0e0e0;
            padding: 10px 20px;
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .toolbar-group {
            display: flex;
            gap: 5px;
            align-items: center;
            padding-right: 15px;
            border-right: 1px solid #e0e0e0;
        }
        
        .toolbar-group:last-child {
            border-right: none;
        }
        
        .toolbar-btn {
            padding: 8px 12px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .toolbar-btn:hover {
            background: #f0f0f0;
            border-color: #ccc;
        }
        
        .toolbar-btn.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }
        
        .toolbar-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: #f9f9f9;
        }
        
        .toolbar-btn:disabled:hover {
            background: #f9f9f9;
            border-color: #ddd;
        }
        
        .toolbar-select {
            padding: 6px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: white;
            font-size: 14px;
            cursor: pointer;
        }
        
        .editor-main {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        
        .editor-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        .editor-workspace {
            flex: 1;
            position: relative;
            overflow: hidden;
        }
        
        .editor-textarea {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            padding: 20px;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.6;
            resize: none;
            background: white;
        }
        
        .editor-footer {
            background: #f5f5f5;
            border-top: 1px solid #e0e0e0;
            padding: 8px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #666;
        }
        
        .footer-left {
            display: flex;
            gap: 20px;
        }
        
        .footer-right {
            display: flex;
            gap: 20px;
        }
        
        .context-menu {
            position: fixed;
            background: white;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 1000;
            min-width: 150px;
            padding: 5px 0;
        }
        
        .context-menu-item {
            padding: 8px 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            transition: background 0.2s ease;
        }
        
        .context-menu-item:hover {
            background: #f0f0f0;
        }
        
        .context-menu-item.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .context-menu-divider {
            height: 1px;
            background: #e0e0e0;
            margin: 5px 0;
        }
        
        .shortcut {
            margin-left: auto;
            font-size: 12px;
            color: #999;
        }
        
        .search-replace {
            position: absolute;
            top: 10px;
            right: 10px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 15px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 500;
            min-width: 300px;
        }
        
        .search-input {
            width: 100%;
            padding: 6px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .search-actions {
            display: flex;
            gap: 5px;
            justify-content: flex-end;
        }
        
        .search-btn {
            padding: 4px 8px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .search-btn:hover {
            background: #f0f0f0;
        }
        
        .drag-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(102, 126, 234, 0.1);
            border: 2px dashed #667eea;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2em;
            color: #667eea;
            font-weight: 600;
            z-index: 1000;
        }
        
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #4CAF50;
            color: white;
            padding: 12px 20px;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 3000;
            animation: slideInRight 0.3s ease;
        }
        
        .toast.error {
            background: #f44336;
        }
        
        .toast.warning {
            background: #ff9800;
        }
        
        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(100%);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* 任务完成提示样式 */
        .task-completed {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            border-radius: 4px;
            padding: 10px;
            margin: 10px;
            font-size: 12px;
            color: #155724;
        }
        
        .task-completed strong {
            color: #0f5132;
        }
        
        /* 历史记录状态显示 */
        .history-status {
            background: #e3f2fd;
            border: 1px solid #bbdefb;
            border-radius: 4px;
            padding: 8px;
            margin: 5px;
            font-size: 11px;
            color: #1565c0;
        }
        
        /* 选择状态显示 */
        .selection-status {
            background: #fff3e0;
            border: 1px solid #ffcc02;
            border-radius: 4px;
            padding: 8px;
            margin: 5px;
            font-size: 11px;
            color: #e65100;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="editor-container">
            <!-- 编辑器头部 -->
            <div class="editor-header">
                <div class="editor-title">多功能文本编辑器 - 任务3完成版</div>
                <div class="editor-status">
                    <div class="status-item">
                        <div class="status-indicator" :class="{ saving: isSaving }"></div>
                        <span>{{ saveStatus }}</span>
                    </div>
                    <div class="status-item">
                        <span>历史: {{ historyIndex + 1 }}/{{ history.length }}</span>
                    </div>
                    <div class="status-item" v-if="selectedText">
                        <span>选中: {{ selectedText.length }} 字符</span>
                    </div>
                    <div class="status-item">
                        <span>{{ currentTime }}</span>
                    </div>
                </div>
            </div>
            
            <!-- 工具栏 -->
            <div class="toolbar">
                <div class="toolbar-group">
                    <!-- 任务1: 工具栏按钮点击事件 - 已完成 -->
                    <div class="task-completed">
                        <strong>任务1已完成:</strong> 文件操作功能
                    </div>
                    <button class="toolbar-btn" @click="newFile" title="新建文件 (Ctrl+N)">
                        📄 新建
                    </button>
                    <button class="toolbar-btn" @click="openFile" title="打开文件 (Ctrl+O)">
                        📁 打开
                    </button>
                    <button class="toolbar-btn" @click="saveFile" title="保存文件 (Ctrl+S)">
                        💾 保存
                    </button>
                    <button class="toolbar-btn" @click="saveAsFile" title="另存为 (Ctrl+Shift+S)">
                        📋 另存为
                    </button>
                </div>
                
                <div class="toolbar-group">
                    <!-- 任务2: 撤销/重做功能 - 已完成 -->
                    <div class="task-completed">
                        <strong>任务2已完成:</strong> 撤销/重做功能
                    </div>
                    <button 
                        class="toolbar-btn" 
                        @click="undo" 
                        :disabled="!canUndo"
                        title="撤销 (Ctrl+Z)"
                    >
                        ↶ 撤销
                    </button>
                    <button 
                        class="toolbar-btn" 
                        @click="redo" 
                        :disabled="!canRedo"
                        title="重做 (Ctrl+Y)"
                    >
                        ↷ 重做
                    </button>
                    <div class="history-status">
                        历史记录: {{ history.length }} 条
                    </div>
                </div>
                
                <div class="toolbar-group">
                    <!-- 任务3: 编辑操作功能 - 已完成 -->
                    <div class="task-completed">
                        <strong>任务3已完成:</strong> 编辑操作功能
                    </div>
                    <button 
                        class="toolbar-btn" 
                        @click="cut" 
                        :disabled="!selectedText"
                        title="剪切 (Ctrl+X)"
                    >
                        ✂️ 剪切
                    </button>
                    <button 
                        class="toolbar-btn" 
                        @click="copy" 
                        :disabled="!selectedText"
                        title="复制 (Ctrl+C)"
                    >
                        📋 复制
                    </button>
                    <button 
                        class="toolbar-btn" 
                        @click="paste" 
                        title="粘贴 (Ctrl+V)"
                    >
                        📌 粘贴
                    </button>
                    <div class="selection-status" v-if="selectedText">
                        已选择: {{ selectedText.length }} 字符
                    </div>
                </div>
                
                <div class="toolbar-group">
                    <button 
                        class="toolbar-btn" 
                        @click="toggleSearch" 
                        title="查找替换 (Ctrl+F)"
                    >
                        🔍 查找
                    </button>
                    <button 
                        class="toolbar-btn" 
                        @click="selectAll" 
                        title="全选 (Ctrl+A)"
                    >
                        📝 全选
                    </button>
                </div>
                
                <div class="toolbar-group">
                    <!-- 任务4: 添加下拉选择器的事件处理 -->
                    <select class="toolbar-select">
                        <option value="12">12px</option>
                        <option value="14" selected>14px</option>
                        <option value="16">16px</option>
                        <option value="18">18px</option>
                        <option value="20">20px</option>
                        <option value="24">24px</option>
                    </select>
                    
                    <select class="toolbar-select">
                        <option value="Consolas" selected>Consolas</option>
                        <option value="Monaco">Monaco</option>
                        <option value="Courier New">Courier New</option>
                        <option value="Arial">Arial</option>
                        <option value="Times New Roman">Times New Roman</option>
                    </select>
                </div>
                
                <div class="toolbar-group">
                    <button class="toolbar-btn" title="自动换行">
                        📄 换行
                    </button>
                    <button class="toolbar-btn" title="全屏模式 (F11)">
                        🔲 全屏
                    </button>
                </div>
            </div>
            
            <!-- 主要内容区域 -->
            <div class="editor-main">
                <!-- 编辑器内容 -->
                <div class="editor-content">
                    <!-- 编辑器工作区 -->
                    <div class="editor-workspace">
                        <!-- 拖拽覆盖层 -->
                        <div v-if="isDragging" class="drag-overlay">
                            📁 拖拽文件到这里打开
                        </div>
                        
                        <!-- 文本编辑区 -->
                        <textarea 
                            ref="textarea"
                            class="editor-textarea"
                            v-model="content"
                            @keydown="handleKeydown"
                            @input="handleInput"
                            @select="updateSelection"
                            @click="updateSelection"
                            @keyup="updateSelection"
                            placeholder="任务3完成！编辑操作功能已实现。

✅ 已完成功能：
任务1 - 文件操作：
- 新建文件：清空编辑器内容
- 打开文件：选择本地文件并读取内容
- 保存文件：下载当前内容为txt文件
- 另存为：自定义文件名并下载

任务2 - 撤销/重做：
- 撤销功能：Ctrl+Z 或点击撤销按钮
- 重做功能：Ctrl+Y 或点击重做按钮
- 历史记录管理：自动保存编辑历史
- 按钮状态控制：动态启用/禁用按钮
- 防抖优化：避免频繁保存历史记录

任务3 - 编辑操作：
- 剪切功能：Ctrl+X 或点击剪切按钮
- 复制功能：Ctrl+C 或点击复制按钮
- 粘贴功能：Ctrl+V 或点击粘贴按钮
- 全选功能：Ctrl+A 或点击全选按钮
- 剪贴板权限处理：支持现代API和降级方案
- 选择状态管理：实时显示选中文本信息

🎯 测试方法：
1. 选择一些文本，然后点击复制或按 Ctrl+C
2. 点击剪切或按 Ctrl+X - 文本应该被剪切
3. 点击粘贴或按 Ctrl+V - 文本应该被粘贴
4. 点击全选或按 Ctrl+A - 所有文本应该被选中
5. 观察按钮状态 - 未选择文本时剪切/复制按钮应该禁用
6. 查看状态栏 - 显示选中文本的字符数

💡 技术要点：
- 现代剪贴板API使用
- 文本选择状态管理
- 光标位置计算
- 异步操作处理
- 权限和兼容性处理
- 降级方案实现

继续完成其他任务以实现更多功能！"
                            spellcheck="false"
                        ></textarea>
                        
                        <!-- 查找替换面板 -->
                        <div v-if="showSearchPanel" class="search-replace">
                            <input 
                                v-model="searchText" 
                                class="search-input" 
                                placeholder="查找内容"
                            >
                            <input 
                                v-model="replaceText" 
                                class="search-input" 
                                placeholder="替换为"
                            >
                            <div class="search-actions">
                                <button class="search-btn">上一个</button>
                                <button class="search-btn">下一个</button>
                                <button class="search-btn">替换</button>
                                <button class="search-btn">全部替换</button>
                                <button class="search-btn" @click="toggleSearch">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 状态栏 -->
            <div class="editor-footer">
                <div class="footer-left">
                    <span>行 {{ cursorPosition.line }}, 列 {{ cursorPosition.column }}</span>
                    <span>选中 {{ selectionLength }} 个字符</span>
                    <span>编码: UTF-8</span>
                    <span>历史: {{ historyIndex + 1 }}/{{ history.length }}</span>
                </div>
                <div class="footer-right">
                    <span>Plain Text</span>
                    <span>字符数: {{ content.length }}</span>
                    <span v-if="selectedText">选中: {{ selectedText.length }}</span>
                </div>
            </div>
        </div>
        
        <!-- 右键菜单 -->
        <div v-if="contextMenu.show" class="context-menu" :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }">
            <div class="context-menu-item" @click="undo" :class="{ disabled: !canUndo }">
                <span>撤销</span>
                <span class="shortcut">Ctrl+Z</span>
            </div>
            <div class="context-menu-item" @click="redo" :class="{ disabled: !canRedo }">
                <span>重做</span>
                <span class="shortcut">Ctrl+Y</span>
            </div>
            <div class="context-menu-divider"></div>
            <div class="context-menu-item" @click="cut" :class="{ disabled: !selectedText }">
                <span>剪切</span>
                <span class="shortcut">Ctrl+X</span>
            </div>
            <div class="context-menu-item" @click="copy" :class="{ disabled: !selectedText }">
                <span>复制</span>
                <span class="shortcut">Ctrl+C</span>
            </div>
            <div class="context-menu-item" @click="paste">
                <span>粘贴</span>
                <span class="shortcut">Ctrl+V</span>
            </div>
            <div class="context-menu-divider"></div>
            <div class="context-menu-item" @click="selectAll">
                <span>全选</span>
                <span class="shortcut">Ctrl+A</span>
            </div>
            <div class="context-menu-item" @click="toggleSearch">
                <span>查找替换</span>
                <span class="shortcut">Ctrl+F</span>
            </div>
        </div>
        
        <!-- 提示消息 -->
        <div v-if="toast.show" class="toast" :class="toast.type">
            {{ toast.message }}
        </div>
    </div>
    
    <script>
        const { createApp, ref, reactive, computed, onMounted, nextTick, watch } = Vue;
        
        createApp({
            setup() {
                // 基础状态
                const textarea = ref(null);
                const content = ref('');
                const showSearchPanel = ref(false);
                const isDragging = ref(false);
                const isSaving = ref(false);
                
                // 历史记录管理
                const history = ref([]);
                const historyIndex = ref(-1);
                const maxHistorySize = 50;
                const isUpdatingFromHistory = ref(false);
                
                // ==========================================
                // 任务3: 选择状态管理 - 已完成实现
                // ==========================================
                const selectedText = ref('');
                const selectionStart = ref(0);
                const selectionEnd = ref(0);
                
                // 编辑器设置
                const fontSize = ref(14);
                const fontFamily = ref('Consolas');
                
                // 光标位置
                const cursorPosition = ref({ line: 1, column: 1 });
                const selectionLength = ref(0);
                
                // 搜索替换
                const searchText = ref('');
                const replaceText = ref('');
                
                // 当前时间
                const currentTime = ref('');
                
                // 保存状态
                const saveStatus = computed(() => {
                    if (isSaving.value) return '保存中...';
                    return '任务1-3完成';
                });
                
                // 撤销/重做计算属性
                const canUndo = computed(() => {
                    return historyIndex.value > 0;
                });
                
                const canRedo = computed(() => {
                    return historyIndex.value < history.value.length - 1;
                });
                
                // 右键菜单
                const contextMenu = reactive({
                    show: false,
                    x: 0,
                    y: 0
                });
                
                // 提示消息
                const toast = reactive({
                    show: false,
                    type: 'success',
                    message: ''
                });
                
                // 防抖函数
                const debounce = (func, wait) => {
                    let timeout;
                    return function executedFunction(...args) {
                        const later = () => {
                            clearTimeout(timeout);
                            func(...args);
                        };
                        clearTimeout(timeout);
                        timeout = setTimeout(later, wait);
                    };
                };
                
                // 更新时间
                const updateTime = () => {
                    const now = new Date();
                    currentTime.value = now.toLocaleTimeString();
                };
                
                // 显示提示消息
                const showToast = (message, type = 'success') => {
                    toast.message = message;
                    toast.type = type;
                    toast.show = true;
                    setTimeout(() => {
                        toast.show = false;
                    }, 3000);
                };
                
                // ==========================================
                // 任务3: 选择状态更新函数 - 已完成实现
                // ==========================================
                
                // 更新选择状态
                const updateSelection = () => {
                    if (textarea.value) {
                        const element = textarea.value;
                        selectionStart.value = element.selectionStart;
                        selectionEnd.value = element.selectionEnd;
                        selectedText.value = content.value.substring(
                            element.selectionStart, 
                            element.selectionEnd
                        );
                        selectionLength.value = selectedText.value.length;
                        
                        // 更新光标位置
                        const beforeCursor = content.value.substring(0, element.selectionStart);
                        const lines = beforeCursor.split('\n');
                        cursorPosition.value = {
                            line: lines.length,
                            column: lines[lines.length - 1].length + 1
                        };
                    }
                };
                
                // ==========================================
                // 任务3: 编辑操作函数 - 已完成实现
                // ==========================================
                
                // 复制操作
                const copy = async () => {
                    if (selectedText.value) {
                        try {
                            await navigator.clipboard.writeText(selectedText.value);
                            showToast(`已复制 ${selectedText.value.length} 个字符`, 'success');
                        } catch (err) {
                            // 降级方案：使用传统方法
                            const textArea = document.createElement('textarea');
                            textArea.value = selectedText.value;
                            document.body.appendChild(textArea);
                            textArea.select();
                            document.execCommand('copy');
                            document.body.removeChild(textArea);
                            showToast(`已复制 ${selectedText.value.length} 个字符 (降级模式)`, 'success');
                        }
                    } else {
                        showToast('请先选择要复制的文本', 'warning');
                    }
                };
                
                // 剪切操作
                const cut = async () => {
                    if (selectedText.value) {
                        try {
                            await navigator.clipboard.writeText(selectedText.value);
                            
                            // 删除选中的文本
                            const newContent = content.value.substring(0, selectionStart.value) + 
                                             content.value.substring(selectionEnd.value);
                            content.value = newContent;
                            
                            // 设置光标位置
                            nextTick(() => {
                                if (textarea.value) {
                                    textarea.value.setSelectionRange(selectionStart.value, selectionStart.value);
                                    textarea.value.focus();
                                    updateSelection();
                                }
                            });
                            
                            showToast(`已剪切 ${selectedText.value.length} 个字符`, 'success');
                        } catch (err) {
                            // 降级方案
                            const textArea = document.createElement('textarea');
                            textArea.value = selectedText.value;
                            document.body.appendChild(textArea);
                            textArea.select();
                            document.execCommand('copy');
                            document.body.removeChild(textArea);
                            
                            // 删除选中的文本
                            const newContent = content.value.substring(0, selectionStart.value) + 
                                             content.value.substring(selectionEnd.value);
                            content.value = newContent;
                            
                            nextTick(() => {
                                if (textarea.value) {
                                    textarea.value.setSelectionRange(selectionStart.value, selectionStart.value);
                                    textarea.value.focus();
                                    updateSelection();
                                }
                            });
                            
                            showToast(`已剪切 ${selectedText.value.length} 个字符 (降级模式)`, 'success');
                        }
                    } else {
                        showToast('请先选择要剪切的文本', 'warning');
                    }
                };
                
                // 粘贴操作
                const paste = async () => {
                    try {
                        const clipboardText = await navigator.clipboard.readText();
                        
                        if (clipboardText) {
                            // 在光标位置插入文本
                            const newContent = content.value.substring(0, selectionStart.value) + 
                                             clipboardText + 
                                             content.value.substring(selectionEnd.value);
                            content.value = newContent;
                            
                            // 设置光标位置到粘贴文本的末尾
                            const newCursorPos = selectionStart.value + clipboardText.length;
                            nextTick(() => {
                                if (textarea.value) {
                                    textarea.value.setSelectionRange(newCursorPos, newCursorPos);
                                    textarea.value.focus();
                                    updateSelection();
                                }
                            });
                            
                            showToast(`已粘贴 ${clipboardText.length} 个字符`, 'success');
                        } else {
                            showToast('剪贴板为空', 'warning');
                        }
                    } catch (err) {
                        showToast('无法访问剪贴板，请使用 Ctrl+V', 'error');
                    }
                };
                
                // 全选操作
                const selectAll = () => {
                    if (textarea.value) {
                        textarea.value.select();
                        updateSelection();
                        showToast(`已选择全部文本 (${content.value.length} 个字符)`, 'success');
                    }
                };
                
                // ==========================================
                // 历史记录管理函数
                // ==========================================
                
                // 保存历史记录
                const saveToHistory = (content) => {
                    // 如果当前不在历史记录末尾，删除后面的记录
                    if (historyIndex.value < history.value.length - 1) {
                        history.value = history.value.slice(0, historyIndex.value + 1);
                    }
                    
                    // 添加新的历史记录
                    history.value.push(content);
                    historyIndex.value = history.value.length - 1;
                    
                    // 限制历史记录数量
                    if (history.value.length > maxHistorySize) {
                        history.value.shift();
                        historyIndex.value--;
                    }
                };
                
                // 防抖保存历史记录
                const debouncedSaveHistory = debounce((newContent) => {
                    if (!isUpdatingFromHistory.value && newContent !== (history.value[historyIndex.value] || '')) {
                        saveToHistory(newContent);
                    }
                }, 500);
                
                // 撤销操作
                const undo = () => {
                    if (canUndo.value) {
                        historyIndex.value--;
                        isUpdatingFromHistory.value = true;
                        content.value = history.value[historyIndex.value];
                        nextTick(() => {
                            isUpdatingFromHistory.value = false;
                            updateSelection();
                        });
                        showToast(`撤销成功 (${historyIndex.value + 1}/${history.value.length})`, 'success');
                    } else {
                        showToast('没有可撤销的操作', 'warning');
                    }
                };
                
                // 重做操作
                const redo = () => {
                    if (canRedo.value) {
                        historyIndex.value++;
                        isUpdatingFromHistory.value = true;
                        content.value = history.value[historyIndex.value];
                        nextTick(() => {
                            isUpdatingFromHistory.value = false;
                            updateSelection();
                        });
                        showToast(`重做成功 (${historyIndex.value + 1}/${history.value.length})`, 'success');
                    } else {
                        showToast('没有可重做的操作', 'warning');
                    }
                };
                
                // ==========================================
                // 文件操作函数
                // ==========================================
                
                // 新建文件
                const newFile = () => {
                    if (content.value && content.value.trim() !== '') {
                        if (confirm('当前文件未保存，是否继续新建？')) {
                            content.value = '';
                            // 重置历史记录
                            history.value = [''];
                            historyIndex.value = 0;
                            showToast('新建文件成功', 'success');
                        }
                    } else {
                        content.value = '';
                        // 重置历史记录
                        history.value = [''];
                        historyIndex.value = 0;
                        showToast('新建文件成功', 'success');
                    }
                };
                
                // 打开文件
                const openFile = () => {
                    const input = document.createElement('input');
                    input.type = 'file';
                    input.accept = '.txt,.md,.js,.html,.css,.json';
                    input.onchange = (e) => {
                        const file = e.target.files[0];
                        if (file) {
                            const reader = new FileReader();
                            reader.onload = (e) => {
                                content.value = e.target.result;
                                // 重置历史记录
                                history.value = [e.target.result];
                                historyIndex.value = 0;
                                showToast(`文件 "${file.name}" 打开成功`, 'success');
                            };
                            reader.readAsText(file);
                        }
                    };
                    input.click();
                };
                
                // 保存文件
                const saveFile = () => {
                    const blob = new Blob([content.value], { type: 'text/plain' });
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'document.txt';
                    a.click();
                    URL.revokeObjectURL(url);
                    showToast('文件保存成功', 'success');
                };
                
                // 另存为
                const saveAsFile = () => {
                    const filename = prompt('请输入文件名:', 'document.txt');
                    if (filename) {
                        const blob = new Blob([content.value], { type: 'text/plain' });
                        const url = URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = filename;
                        a.click();
                        URL.revokeObjectURL(url);
                        showToast(`文件另存为 "${filename}" 成功`, 'success');
                    }
                };
                
                // ==========================================
                // 任务3: 键盘事件处理 - 已完成实现
                // ==========================================
                
                const handleKeydown = (event) => {
                    if (event.ctrlKey) {
                        switch (event.key) {
                            case 'z':
                                event.preventDefault();
                                undo();
                                break;
                            case 'y':
                                event.preventDefault();
                                redo();
                                break;
                            case 'x':
                                event.preventDefault();
                                cut();
                                break;
                            case 'c':
                                event.preventDefault();
                                copy();
                                break;
                            case 'v':
                                event.preventDefault();
                                paste();
                                break;
                            case 'a':
                                event.preventDefault();
                                selectAll();
                                break;
                            case 'f':
                                event.preventDefault();
                                toggleSearch();
                                break;
                            case 'n':
                                event.preventDefault();
                                newFile();
                                break;
                            case 'o':
                                event.preventDefault();
                                openFile();
                                break;
                            case 's':
                                event.preventDefault();
                                if (event.shiftKey) {
                                    saveAsFile();
                                } else {
                                    saveFile();
                                }
                                break;
                        }
                    }
                };
                
                // 处理输入事件
                const handleInput = () => {
                    // 触发防抖保存历史记录
                    debouncedSaveHistory(content.value);
                    // 更新选择状态
                    updateSelection();
                };
                
                // ==========================================
                // 其他任务的函数（待完成）
                // ==========================================
                
                const toggleSearch = () => {
                    showSearchPanel.value = !showSearchPanel.value;
                    if (showSearchPanel.value) {
                        showToast('查找面板已打开', 'success');
                    } else {
                        showToast('查找面板已关闭', 'success');
                    }
                };
                
                const findNext = () => {
                    showToast('请完成任务8：查找下一个功能', 'warning');
                };
                
                const findPrevious = () => {
                    showToast('请完成任务8：查找上一个功能', 'warning');
                };
                
                const replaceNext = () => {
                    showToast('请完成任务8：替换下一个功能', 'warning');
                };
                
                const replaceAll = () => {
                    showToast('请完成任务8：全部替换功能', 'warning');
                };
                
                const updateFontSize = () => {
                    showToast('请完成任务4：字体大小更新功能', 'warning');
                };
                
                const updateFontFamily = () => {
                    showToast('请完成任务4：字体类型更新功能', 'warning');
                };
                
                const toggleWordWrap = () => {
                    showToast('请完成任务4：自动换行切换功能', 'warning');
                };
                
                const toggleFullscreen = () => {
                    showToast('请完成任务4：全屏切换功能', 'warning');
                };
                
                const handleDrop = (event) => {
                    event.preventDefault();
                    showToast('请完成任务5：文件拖拽功能', 'warning');
                };
                
                const showContextMenu = (event) => {
                    showToast('请完成任务6和9：右键菜单功能', 'warning');
                };
                
                // 全局事件监听
                const handleGlobalClick = (event) => {
                    // 隐藏右键菜单
                    contextMenu.show = false;
                };
                
                // 监听内容变化，自动保存历史记录
                watch(content, (newContent) => {
                    if (!isUpdatingFromHistory.value) {
                        debouncedSaveHistory(newContent);
                    }
                });
                
                // 生命周期
                onMounted(() => {
                    // 初始化历史记录
                    const initialContent = '任务3完成！编辑操作功能已实现。\n\n✅ 已完成功能：\n任务1 - 文件操作：\n- 新建文件：清空编辑器内容\n- 打开文件：选择本地文件并读取内容\n- 保存文件：下载当前内容为txt文件\n- 另存为：自定义文件名并下载\n\n任务2 - 撤销/重做：\n- 撤销功能：Ctrl+Z 或点击撤销按钮\n- 重做功能：Ctrl+Y 或点击重做按钮\n- 历史记录管理：自动保存编辑历史\n- 按钮状态控制：动态启用/禁用按钮\n- 防抖优化：避免频繁保存历史记录\n\n任务3 - 编辑操作：\n- 剪切功能：Ctrl+X 或点击剪切按钮\n- 复制功能：Ctrl+C 或点击复制按钮\n- 粘贴功能：Ctrl+V 或点击粘贴按钮\n- 全选功能：Ctrl+A 或点击全选按钮\n- 剪贴板权限处理：支持现代API和降级方案\n- 选择状态管理：实时显示选中文本信息\n\n🎯 测试方法：\n1. 选择一些文本，然后点击复制或按 Ctrl+C\n2. 点击剪切或按 Ctrl+X - 文本应该被剪切\n3. 点击粘贴或按 Ctrl+V - 文本应该被粘贴\n4. 点击全选或按 Ctrl+A - 所有文本应该被选中\n5. 观察按钮状态 - 未选择文本时剪切/复制按钮应该禁用\n6. 查看状态栏 - 显示选中文本的字符数\n\n💡 技术要点：\n- 现代剪贴板API使用\n- 文本选择状态管理\n- 光标位置计算\n- 异步操作处理\n- 权限和兼容性处理\n- 降级方案实现\n\n继续完成其他任务以实现更多功能！';
                    content.value = initialContent;
                    history.value = [initialContent];
                    historyIndex.value = 0;
                    
                    // 更新时间
                    updateTime();
                    setInterval(updateTime, 1000);
                    
                    // 添加全局事件监听
                    document.addEventListener('click', handleGlobalClick);
                    
                    // 聚焦到文本区域
                    nextTick(() => {
                        if (textarea.value) {
                            textarea.value.focus();
                            updateSelection();
                        }
                    });
                    
                    // 显示欢迎消息
                    showToast('任务3完成！编辑操作功能已实现。', 'success');
                });
                
                // 返回响应式数据和方法
                return {
                    // 引用
                    textarea,
                    
                    // 状态
                    content,
                    showSearchPanel,
                    isDragging,
                    isSaving,
                    
                    // 历史记录
                    history,
                    historyIndex,
                    canUndo,
                    canRedo,
                    
                    // 选择状态 - 任务3
                    selectedText,
                    selectionStart,
                    selectionEnd,
                    
                    // 设置
                    fontSize,
                    fontFamily,
                    
                    // 光标和选择
                    cursorPosition,
                    selectionLength,
                    
                    // 搜索
                    searchText,
                    replaceText,
                    
                    // 状态
                    currentTime,
                    saveStatus,
                    
                    // UI组件
                    contextMenu,
                    toast,
                    
                    // 文件操作 - 任务1已完成
                    newFile,
                    openFile,
                    saveFile,
                    saveAsFile,
                    
                    // 撤销重做 - 任务2已完成
                    undo,
                    redo,
                    
                    // 编辑操作 - 任务3已完成
                    cut,
                    copy,
                    paste,
                    selectAll,
                    updateSelection,
                    
                    // 搜索替换
                    toggleSearch,
                    findNext,
                    findPrevious,
                    replaceNext,
                    replaceAll,
                    
                    // 格式设置
                    updateFontSize,
                    updateFontFamily,
                    toggleWordWrap,
                    toggleFullscreen,
                    
                    // 事件处理
                    handleKeydown,
                    handleInput,
                    handleDrop,
                    showContextMenu
                };
            }
        }).mount('#app');
    </script>
</body>
</html>